import React, { Component } from 'react';
import {mapState,mapDispatch} from '../../store/bindState'
import './NavBar.css'
class NavBar extends Component {
    changeBarIndex(index){
         //修改bar的状态
        this.props.changeBarIndex(index)
        console.log(1);
        //实现页面跳转
        this.props.history.replace(this.props.items[index].path)
        this.props.changeTitle(this.props.items[index].title)
        console.log(this.props.items[index].title); 
    }
    render() {
        return (
            <div>
                <div className="navbar">
                    {this.props.items.map((item,index)=>{
                        return (
                            <div key={index} className={this.props.selectBarIndex === index ? 'active' : null} onClick={this.changeBarIndex.bind(this,index)}>
                            <i className={'iconfont '+item.iconname}></i>
                            <span className="nb_title">{item.title}</span>
                        </div>
                        )
                    })
                    }
                </div>
        </div>
        );
    }
}

export default mapDispatch(mapState(NavBar,['selectBarIndex','isTabBarShow']),[{type:"changeTitle",params:true},{type:"changeBarIndex",params:true}]);